import React, { memo } from "react"
import { CSSTransition } from "react-transition-group"

import { BottomWrapper } from "./style"
import SearchTitles from "@/assets/data/search_titles.json"

const HeaderCenterBottom = memo((props) => {
  // const [...searchInfo] = SearchTitles
  const { index, showSearchInfo } = props
  const [...searchInfos] = SearchTitles.map((item) => {
    return item.searchInfos
  })
  // console.log(searchInfos)
  return (
    <BottomWrapper width={index === 0 ? "33.33%" : "50%"}>
      {/* <CSSTransition
        // in 是否显示动画
        in={showSearchInfo}
        className="section"
        timeout={2000}
        // 退出后卸载组件
        unmountOnExit={true}
      > */}
      <div className="section">
        {searchInfos[index].map((item) => {
          return (
            <div className="info" key={item.title}>
              <div className="infoWrapper">
                <span className="title">{item.title}</span>
                <span>{item.desc}</span>
              </div>
            </div>
          )
        })}
      </div>
      {/* </CSSTransition> */}
    </BottomWrapper>
  )
})

export default HeaderCenterBottom
